<template>
	<div class = "readDetail">
		<h2>{{info.hp_title}}</h2>
		<h3>文 / {{info.hp_author}}</h3>
		<div v-html = "info.hp_content" class = "hp_content"></div>
		<p class = "editor">{{info.hp_author_introduce}} {{info.editor_email}}</p>
		<p class = "copyright">{{info.copyright}}</p>
		<div v-if = "info.author">
			<author :authorInfo = 'info.author'></author>
		</div>
		<comment :type = "type" :id = "info.content_id"></comment>
		<download></download>
		<paging :type = "'read'" :next = "info.next_id" :prev = "info.previous_id"></paging>
	</div>
</template>

<script>
import axios from 'axios'
import author from '@/common/author'
import download from '@/common/download'
import comment from '@/common/comment'
import paging from '@/common/paging'
export default {
	name : 'readingDetail',
	data () {
		return {
			info : {},
			type : "essay",
		}
	},
	components : {
		author,
		download,
		comment,
		paging
	},
	methods : {
		getReadDetail (item_id) {
			axios.get ("http://v3.wufazhuce.com:8000/api/essay/"+item_id+"?channel=wdj&source=channel_reading&source_id=9264&version=4.0.2&uuid=ffffffff-a90e-706a-63f7-ccf973aae5ee&platform=android").then(this.getReadDetailSucc);
		},
		getReadDetailSucc (res) {
			if(res.data.res === 0 && res.data.data) {
				this.info = res.data.data;
			}else {
				console.log("请求失败" + res.data.res);
				return;
			}
		}
	},
	mounted () {
		this.getReadDetail(this.$route.params.read_id)
	},
	watch : {
		$route : function(){
			this.getReadDetail(this.$route.params.read_id);
		}
	}
}
</script>

<style lang = "less" scoped>
	.readDetail {
		padding-top:1.7rem;
		h2 {
			font-size:.56rem;
			font-weight:bold;
			line-height:.7rem;
			padding:0 .4rem;
		}
		h3 {
			display: inline-block;
			border-top:.06rem solid #000;
			margin:.3rem 0 1rem .4rem;
			padding:.36rem .1rem 0;
		}
		.hp_content {
			padding:0 .4rem;
			/deep/ p {
				margin-bottom:.4rem;
				font-size: .36rem;
			    font-weight: 300;
			    line-height: .6rem;
			}
			/deep/ img {
				width:100%;
			}
		}
		.editor,
		.copyright {
			padding:0 .4rem;
			color: #808080;
		    font-style: oblique;
		    margin: .4rem .4rem .4rem 0;
		    font-size: .24rem;
		}
		/deep/ .author {
			padding:0 .4rem;
		}
	}
</style>